/* eslint-disable no-unused-vars */
/* eslint-disable class-methods-use-this */
/* eslint-disable import/no-cycle */
import React from 'react';
import { Tabs, Form, Input, Button, Radio, Checkbox } from 'antd';
import BaseControl from './BaseControl';
import BindSelect from '../common/BindSelect';

class RadioControl extends BaseControl {
  static create(props, dataProps, extProps) {
    return new RadioControl(props, dataProps, extProps);
  }

  constructor(props, dataProps, extProps) {
    const dataProps2 = {
      title: '单选框',
      type: 'Radio',
      required: false, // 是否必填
      options: [], // { label: 'Apple', value: 'Apple' }
      defaultValue: '',
      widthPercent: 30,
      // height: 30,
      ...dataProps,
    };
    super(props, dataProps2, extProps);
    this.name = '单选框';

    // this.icon = '';
  }

  load(json) {
    super.load(json);
    this.value = this.value == null ? this.data.defaultValue : this.value;
  }

  getPropertyTabs(parentForm) {
    return [
      ...super.getPropertyTabs(parentForm),
      <Tabs.TabPane tab="控件配置" key="3">
        <Form.Item label="必填">
          <Checkbox
            checked={this.data.required}
            onChange={(e) => {
              this.data.required = e.target.checked;
              parentForm.refreash();
            }}
          />
        </Form.Item>
        <Form.Item label="默认值">
          <BindSelect
            data={this.data}
            field="defaultValue"
            defaultValue=""
            child={() => {
              return (
                <Input
                  placeholder="默认值"
                  value={this.data.defaultValue}
                  onChange={(event) => {
                    this.data.defaultValue = event.target.value;
                    parentForm.refreash();
                  }}
                />
              );
            }}
          />
        </Form.Item>
        <Form.Item label="选项">
          <BindSelect
            data={this.data}
            field="options"
            defaultValue={[]}
            child={() => {
              return (
                <>
                  <Button
                    type="link"
                    onClick={() => {
                      this.data.options = [...this.data.options, { label: '', value: '' }];
                      parentForm.refreash();
                    }}
                  >
                    添加
                  </Button>
                  {this.data.options?.map((item, index) => {
                    const index2 = `${index}`;
                    return (
                      <div key={index2}>
                        <Input
                          placeholder="标题"
                          value={item.label}
                          onChange={(event) => {
                            this.data.options[index].label = event.target.value;
                            this.data.options = [...this.data.options];
                            parentForm.refreash();
                          }}
                        />
                        <Input
                          placeholder="值"
                          value={item.value}
                          onChange={(event) => {
                            this.data.options[index].value = event.target.value;
                            this.data.options = [...this.data.options];
                            parentForm.refreash();
                          }}
                        />
                        <Button
                          type="link"
                          onClick={() => {
                            this.data.options.splice(index, 1);
                            this.data.options = [...this.data.options];
                            parentForm.refreash();
                          }}
                        >
                          删除
                        </Button>
                      </div>
                    );
                  })}
                </>
              );
            }}
          />
        </Form.Item>
      </Tabs.TabPane>,
    ];
  }

  getDesignControl(parentForm) {
    return (
      <Radio.Group
        options={this.data.options}
        value={this.value}
        {...this.extProps}
        onChange={(event) => {
          this.value = event.target.value;
          parentForm.refreash();
          this.extProps?.onChange && this.extProps?.onChange(event);
        }}
      />
    );
  }
}

export default RadioControl;
